<template>
  <Container class="dealer-sign-list">
    <HeadFormItem
      slot="header"
      :list="list"
      @onSearchBtnClick="onSearchBtnClick"
      @onAddBtnClick="onAddBtnClick"
    />
    <Tabs v-model="tab">
      <div slot="extra">
        <Button
          type="primary"
          size="large"
          icon="md-add"
          class="item"
          @click="onAddBtnClick"
        >新增经销商</Button>
        <Button
          size="large"
          class="item"
          icon="md-refresh"
          @click="onRefresh"
        >刷新</Button>
        <export-btn 
          :param="exportParam" 
          url='/distributor/contract/export_sign_record'
          class="item"
          slot="extra"></export-btn>
      </div>
      <TabPane label="经销商签约列表" name="tab1">
        <homeTable
          :list="list"
          @getData="getData"
          @onPageSizeChange="onPageSizeChange"
          @onPageChange="onPageChange"
          @onSelectionChange="onSelectionChange"
        />
      </TabPane>
    </Tabs>
    <DealerBindModalItem ref="supplerBind" />
    <DealerUnbindModalItem ref="dealerUnbind" />
    <DealerGetGoodsModal ref="dealerGetGoodsModal" />
  </Container>
</template>
<script>
import DealerSignListData from './list/DealerSignListData'
import HeadFormItem from './list/HeadFormItem'
import DealerBindModalItem from './edit/DealerBindModalItem'
import DealerUnbindModalItem from './edit/DealerUnbindModalItem'
import homeTable from '@/components/homeTable'

import { clearEmpty } from '@/util'
export default {
  name: 'manage/dealersign/list',
  components: {
    HeadFormItem,
    DealerBindModalItem,
    DealerUnbindModalItem,
    homeTable
  },
  data () {
    return {
      tab: 'tab1',
      list: DealerSignListData,
      productIds: []
    }
  },
  watch: {
  },
  mounted () {
    this.getData()
    this.$bus.$on('bindRow', this.supplerBindOpen)
    this.$bus.$on('detailRow', this.info)
    this.$bus.$on('editRow', this.edit)
    this.$bus.$on('unbind', this.unbindOpen)
    this.$bus.$on('payAccount', this.payAccount)
    this.$bus.$on('getGoods', this.getGoods)
  },
  destroyed () {
    this.$bus.$off()
  },
  methods: {
    onSearchBtnClick () {
      this.list.currentPage = 1
      this.getData()
    },
    onAddBtnClick () {
      this.$router.push({
        name: 'manage/dealersign/edit'
      })
    },
    edit (row) {
      this.$router.push({
        name: 'manage/dealersign/edit',
        query: {
          id: row.id,
          phone: row.distributorMobile,
          distributorId: row.distributorId
        }
      })
    },
    info () {
      this.$router.push({
        name: 'manage/dealersign/info',
        query: {
          id: 12313
        }
      })
    },
    // 调转中金支付绑定
    payAccount (row) {
      this.$router.push({
        name: 'manage/dealersign/payAccount',
        query: {
          id: row.distributorId,
          name: row.distributorName
        }
      })
    },
    // 商户进件
    getGoods (row) {
      this.$refs.dealerGetGoodsModal.openModal(row)
    },
    unbindOpen (row) {
      this.$refs.dealerUnbind.openModal(row)
    },
    supplerBindOpen (row) {
      this.$refs.supplerBind.openModal(row)
    },
    getData () {
      this.productIds = []
      this.list.status = 'loading'
      // const { name, contactMobile, contactName } =
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        name: this.list.form.name,
        contactMobile: this.list.form.contactMobile,
        contactName: this.list.form.contactName,
        brandId: this.list.form.brandId,
        officeId: this.list.form.officeId,
        departmentId: this.list.form.departmentId,
        distributorId: this.list.form.distributorId
      }
      param = clearEmpty(param)
      this.$ajaxGet('/distributor/contract/findByQuery', param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          const { id, distributorId, distributorName, sourceBtypeEasyCode, distributorContact, distributorMobile, bindBrandNames,
            bindDepartmentName, createDate, provinceName, cityName, areaName, bindDepartmentChildName, supplierId
          } = item
          return {
            id, distributorId, distributorName, sourceBtypeEasyCode, distributorContact, distributorMobile, bindBrandNames, bindDepartmentName, createDate, bindDepartmentChildName, supplierId,
            area: `${provinceName}-${cityName}-${areaName || ''}`
          }
        })
        this.list.status = 'pass'
      })
        .catch(() => {
          this.list.status = 'error'
        })
    },
    onSelectionChange (selection) {
      this.productIds = (selection || []).map(item => item.id)
    },
    onPageChange (number) {
      this.list.currentPage = number
      this.getData()
    },
    onPageSizeChange (pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.getData()
    },
    onRefresh () {
      this.getData()
    },
  },
  computed: {
    exportParam() {
      const { name, contactMobile, contactName, brandId, officeId, departmentId, distributorId } = this.list.form
      let params = {
        name, contactMobile, contactName, brandId, officeId, departmentId, distributorId
      }
      params = clearEmpty(params)
      return params
    }
  }
}
</script>
